<template>
  <div id="index" ref="appRef">
    <div class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10" />
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="['#00c2ff', '#000000']" />
            <div class="title">
              <span class="title-text">人工保洁大数据可视化平台</span>
              <dv-decoration-6 class="dv-dec-6" :reverse="true" />
            </div>
            <dv-decoration-8
              class="dv-dec-8"
              :reverse="true"
              :color="['#00c2ff', '#000000']"
            />
          </div>
          <dv-decoration-10 class="dv-dec-10-s" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex aside-width">
            <div class="react-left ml-4 react-l-s">
              <span class="react-before"></span>
              <!-- <span class="text">数据分析1</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />

              <!-- <dv-decoration-10  class="dv-dec-10-s"/> -->
            </div>
            <div class="react-left ml-3">
              <!-- <span class="text">数据分析2</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />
            </div>
          </div>
          <div class="d-flex aside-width">
            <div class="react-right mr-3">
              <!-- <span class="text fw-b">vue-big-screen</span> -->
              <dv-decoration-3 style="width: 300px; height: 50px" />
            </div>
            <div class="react-time mr-4 react-l-s">
              <span class="react-after"></span>
              <!-- <span class="text"
                >{{ dateYear }} {{ dateWeek }} {{ dateDay }}</span
              > -->
              <h4 class="text">{{ dateYear }} {{ dateWeek }} {{ dateDay }}</h4>
            </div>
          </div>
        </div>
        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box3">
            <div class="one">
              <dv-border-box-7 :color="['#08304a', '#126e82']">
                <div class="d-flex pt-2 pl-2 title">
                  <span>
                    <icon name="chart-bar" class="text-icon"></icon>
                  </span>
                  <div class="d-flex">
              <span class="fs-xl text mx-2">实时人员在线统计 </span>
            </div>
          </div>

          <div id="WorkOnStandard_ONE" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <!-- <div class="two">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">班组长巡逻村情况统计 </span>
            </div>
          </div>

          <div id="WorkOnStandard_TWO" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div> -->
      <!-- <div class="three">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">各机扫队道路作业完成百分比 </span>
            </div>
          </div>

          <div
            id="WorkOnStandard_THREE"
            style="width: 98%; height: 200px"
          ></div>
        </dv-border-box-7>
      </div> -->
      <div class="four">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">{{
                this.changeOperationName
              }}</span>
            </div>
          </div>
          
          <el-button-group style="position: absolute;right: 25%;z-index: 99;">
            <el-button
              round
              type="primary"
              v-for="(item, index) in mapOperationsSummary"
              size="mini"
              :key="index"
              @click="changeOperationSummaryValue(index)"
              >{{ item.name }}
            </el-button>
          </el-button-group>
          <div
            :id="this.changeOperationValue"
            style="width: 98%; height: 440px"
          ></div>
        </dv-border-box-7>
      </div>
      <div class="five">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日道路作业完成统计</span>
            </div>
          </div>
          <!-- <div
                  id="WorkRatioByCartype"
                  style="width: 98%; height: 200px"
                ></div> -->
          <div id="WorkOnStandard_FIVE" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <div class="six">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
        <div style="width: 100%; height: 190px">
          <el-row :gutter="12" style="margin: 2% 0">
            <el-col :span="8">
              <el-card shadow="always">
                <div class="ht">人员总数</div>
                <div class="hd">{{ staticInfo.workerAll }}</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="always" >
                <div class="ht">在线数</div>
                <div class="hd">{{ staticInfo.workerOnline }}</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="always" >
                <div class="ht">离线数</div>
                <div class="hd">{{ staticInfo.workerOffline }}</div>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="12" style="margin: 2% 0">
            <el-col :span="8">
              <el-card shadow="always">
                <div class="ht">班组数</div>
                <div class="hd">{{ staticInfo.classAll }}</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="always" >
                <div class="ht">正点打卡数</div>
                <div class="hd">{{ staticInfo.OnTime }}</div>
              </el-card>
            </el-col>
            <el-col :span="8">
              <el-card shadow="always" >
                <div class="ht">缺卡数</div>
                <div class="hd">{{ staticInfo.Belate }}</div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </dv-border-box-7>
      </div>
      <div class="seven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2"
                >各班组人员人均报警统计情况</span
              >
            </div>
          </div>

          <div id="WorkOnStandard_SS" style="width: 98%; height: 660px"></div>
        </dv-border-box-7>
      </div>
      <!-- <div class="eight">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">各班组昨日道路作业完成百分比 </span>
            </div>
          </div>

          <div
            id="WorkOnStandard_EIGHT"
            style="width: 98%; height: 200px"
          ></div>
        </dv-border-box-7>
      </div> -->
      <div class="nine">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日人员出勤率 </span>
            </div>
          </div>

          <div id="WorkOnStandard_NINE" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div>
      <!-- <div class="ten">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">各班组昨日考勤打卡正点次数百分比 </span>
            </div>
          </div>

          <div id="WorkOnStandard_TEN" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div> -->
      <!-- <div class="eleven">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">人员作业统计</span>
            </div>

            <el-form ref="form" :model="form" class="list">
              <el-form-item label="">
                <el-select
                  v-model="form.clientNo2"
                  placeholder="请选择"
                  @change="initWorkOnStandard_JS"
                >
                  <el-option
                    v-for="item in workList"
                    :key="item.categories"
                    :label="item.data"
                    :value="item.categories"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>

          <div id="WorkOnStandard_JS" style="width: 98%; height: 200px"></div>
        </dv-border-box-7>
      </div> -->
      <div class="twelve">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">人员作业趟次 </span>
            </div>

            <el-form ref="form" :model="form" class="list">
              <el-form-item label="">
                <el-select
                  size="medium"
                  v-model="form.clientNo"
                  placeholder="请选择"
                  @change="initWorkOnStandard_CX"
                  style="width:140px"
                  :popper-append-to-body="false"
                >
                  <el-option
                    v-for="item in workList"
                    :key="item.categories"
                    :label="item.data"
                    :value="item.categories"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>

          <div id="WorkOnStandard_CX" style="width: 98%; height: 440px"></div>
        </dv-border-box-7>
      </div>
      <div class="thirteen">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">昨日考勤打卡正点人数情况统计 </span>
            </div>
          </div>

          <div
            id="WorkOnStandard_THIRTEEN"
            style="width: 98%; height: 200px"
          ></div>
        </dv-border-box-7>
      </div>
      <!-- <div class="fourteen">
        <dv-border-box-7 :color="['#08304a', '#126e82']">
          <div class="d-flex pt-2 pl-2 title">
            <span>
              <icon name="chart-bar" class="text-icon"></icon>
            </span>
            <div class="d-flex">
              <span class="fs-xl text mx-2">各班组昨日考勤打卡正点人数百分比 </span>
            </div>
          </div>

                <div
                  id="WorkOnStandard_TOURTEEN"
            style="width: 98%; height: 200px"
                ></div>
              </dv-border-box-7>
      </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { optionWorkOnStandard } from '@/components/echart/bar.js'
import { collectionRate } from "@/components/echart/bar.js";
import { spotsNumbeH2 } from "@/components/echart/bar.js";
// import { incomingQuantity } from '@/components/echart/bar.js'
import { spotsNumbe } from "@/components/echart/bar.js";
import { spotsNumbe2 } from "@/components/echart/bar.js";
import { brokenLine1 } from "@/components/echart/bar.js";
import { optionBarContainBarAndRatio } from "@/components/echart/bar.js";
import drawMixin from "../utils/drawMixin";
import { formatTime } from "../utils/index.js";
import { formatDate } from "@/common/js/date.js";
import * as echarts from "echarts";
export default {
  mixins: [drawMixin],
  data() {
    return {
      ClientNo: "0000009",
      nowDate: formatDate(
        new Date(new Date().getTime() - 3600 * 1000 * 24),
        "yyyy-MM-dd"
      ),
      radio1: "上海",
      workList: [],
      changeOperationName: "各班组人员实时在线统计情况百分比",
      changeOperationValue: "WorkOnStandard_FOUR",
      mapOperationsSummary: [
        {
          name: "实时在线",
          icon: "el-icon-truck",
        },
        {
          name: "道路作业",
          icon: "el-icon-house",
        },
        {
          name: "正点次数",
          icon: "el-icon-house",
        },
        {
          name: "正点人数",
          icon: "el-icon-house",
        },
      ],
      form: {
        userName: "dlhw",
        date: "2020-10",
        clientNo: "00000",
        clientNo2: "00000",
        vehicleData: [
          {
            排队数: "0",
            车辆总数: "0",
            出动数: "0",
            出动率: "0",
          },
        ],
      },
      MapV: {
        iconLayerDic: {},
        textLayerDic: {},
        dataSetDic: {},
        VIcon_Installations: {},
        VText_Installations: {},
      },
      Data: {
        arrayForType_Rubbish: [],
        arrayCLCPolygonData: [],
        arrayCLCMarkerData: [],
        arrayZZZMarkerData: [],
        arrayNCDMarkerData: [],
        arrayXQCYMarkerData: [],
        arrayCYMarkerData: [],
      },
      staticInfo: {
        workerAll: '',
        workerOnline: '',
        classAll: '',
        OnTime: '',
        Belate: '',
      },
      isZoomChange: "S",
      map: null,
      mapZoom: 16,
      timing: null,
      loading: false,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  components: {
    // centerLeft1,
    // centerLeft2,
    // centerRight1,
    // centerRight2,
    // center,
    // bottomLeft,
    // bottomRight
  },
  mounted() {
    // this.ClientNo = localStorage.getItem("ClientNo");
    // this.form.clientNo = localStorage.getItem("ClientNo");
    // this.form.clientNo2 = localStorage.getItem("ClientNo");
    this.getInfoList();
    this.initWorkOnStandard_SS();
    this.initWorkOnStandard_CX();
    this.initWorkOnStandard_XS();
    this.initWorkOnStandard_JS();
    this.initWorkOnStandard_ONE();
    this.initWorkOnStandard_TWO();
    this.initWorkOnStandard_THREE();
    this.initWorkOnStandard_FOUR();
    this.initWorkOnStandard_EIGHT();
    this.initWorkOnStandard_FIVE();
    this.initWorkOnStandard_SIX();
    this.initWorkOnStandard_NINE();
    this.initWorkOnStandard_TEN();
    this.initWorkOnStandard_THIRTEEN();
    this.initWorkOnStandard_TOURTEEN();

    this.initWorkRatioByCartype();
    this.initStaticInfo()
    this.timeFn();
  },
  beforeDestroy() {
    clearInterval(this.timing);
  },
  methods: {
    // 静态信息
    async initStaticInfo () {
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=dlhw&url=EXEC TRG_GetStatisticsInfo '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      console.log(data)

      this.staticInfo.workerAll = data[0].value

      this.staticInfo.workerOnline = data[1].value
      this.staticInfo.workerOffline = data[2].value
      this.staticInfo.classAll = data[3].value

      this.staticInfo.OnTime = data[4].value
      this.staticInfo.Belate = data[5].value
    },
    // 实时车辆在线统计
    async initWorkOnStandard_ONE() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkOnStandard_ONE"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=dlhw&url=EXEC TRG_GetOnlineInfo '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: [{ "value": data[1].value, "name": "在线：" + data[0].value + "人" }, { "value": data[3].value, "name": "未在线：" + data[2].value + "人" }]
        },]
      });
    },
    // 人员昨日出勤率
    async initWorkOnStandard_NINE() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_NINE")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=dlhw&url=EXEC TRG_GetWorkInfo '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: [{ "value": data[1].value, "name": "出勤：" + data[0].value + "人" }, { "value": data[3].value, "name": "未出勤：" + data[2].value + "人" }]
        },]
      });
    },
    // 昨日道路作业完成统计
    async initWorkOnStandard_FIVE() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_FIVE")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url = "http://111.160.78.62:9935/api/ECharts/GetArrayNameValue?sqlName=dlhw&url=EXEC TRG_GetRoadWorkInfo '" + this.ClientNo + "'"
      const { data } = await this.$Http.get(url)
      myChart.setOption({
        series: [{
          data: [{ "value": data[1].value, "name": "已完成：" + data[0].value  }, { "value": data[3].value, "name": "未完成：" + data[2].value  }]
        },]
      });
    },





    // 获取清扫队列表
    async getInfoList() {
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetRow01N?sqlName=bde&url=exec ZXECharts_GetTeamsForPerson '" +
        this.ClientNo +
        "'";
      let { data } = await this.$Http.get(url);
      this.workList = data;
      // this.workList = [{ categories: '0000009', data: '博德尔清扫队' }, { categories: '000000902', data: '华明清扫队' }, { categories: '00000090201', data: '高新区班组' },
      // { categories: '00000090202', data: '华明园内二班组' }, { categories: '00000090203', data: '华明园内三班组' }, { categories: '00000090204', data: '华明园内一班组' },
      // { categories: '00000090205', data: '津汉公路班组' }, { categories: '00000090206', data: '李明庄班组' }, { categories: '00000090207', data: '明珠花园班组' },
      // { categories: '00000090208', data: '卫国道班组' }, { categories: '00000090209', data: '橡树湾班组' }, { categories: '00000090210', data: '幺六桥班组' },
      // { categories: '000000906', data: '万新清扫队' }, { categories: '00000090601', data: '成林道班组' }, { categories: '00000090602', data: '津滨大道班组' },]
    },
    // 昨日各类型餐饮单位收运数量及覆盖率格式
    async initWorkRatioByCartype() {
      // [{"GROUPNAME":null,"CAR_TYPE":"洗路车","ALLNUM":"93","CURRENTNUM":"57"},
      // {"GROUPNAME":null,"CAR_TYPE":"机扫车","ALLNUM":"27","CURRENTNUM":"17"},
      // {"GROUPNAME":null,"CAR_TYPE":"高压清洗车","ALLNUM":"41","CURRENTNUM":"12"},
      // {"GROUPNAME":null,"CAR_TYPE":"洒水车","ALLNUM":"55","CURRENTNUM":"16"},
      // {"GROUPNAME":null,"CAR_TYPE":"小型机扫车","ALLNUM":"25","CURRENTNUM":"5"},
      // {"GROUPNAME":null,"CAR_TYPE":"除雪车","ALLNUM":"6","CURRENTNUM":"2"},
      // {"GROUPNAME":null,"CAR_TYPE":"总计","ALLNUM":"247","CURRENTNUM":"104"}]
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkRatioByCartype"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(
        optionBarContainBarAndRatio(["覆盖率", "覆盖数", "总数"], {
          category: ["小区", "饭店", "企业"],
          // lineData: [300, 400, 600], barData: [276, 348, 336],
          // rateData: [92, 87, 56,]
        })
      );
      var url =
        "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetPointWorkByTypeInfo?CLIENT_NO=" +
        this.ClientNo;
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        series: [
          {
            data: data.rateData,
          },
          {
            data: data.barData,
          },
          {
            data: data.lineData,
          },
        ],
      });
    },
    
    // 班组长巡逻村情况统计
    async initWorkOnStandard_TWO() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkOnStandard_TWO"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetWorkerCheckInfo  '" +
        this.nowDate +
        "','" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);

      myChart.setOption({
        series: [
          {
            // data: data.series
            data: data,
          },
        ],
      });
    },
    // 各机扫队道路作业完成百分比
    async initWorkOnStandard_THREE() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_THREE")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(brokenLine1());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetVehicleRoadInfo  '" +
        this.nowDate +
        "','" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        // legend: {
        //   data: ['津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292', '津C26292']
        // },
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    
    // 各班组人员实时在线统计情况百分比
    async initWorkOnStandard_FOUR() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_FOUR")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerOnlineInfo '" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      
      
      // data.filter((item) => {
      //   item.data != '0'
      //   return item
      //   })
        console.log(data)
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    //各班组昨日道路作业完成百分比
    async initWorkOnStandard_EIGHT() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_EIGHT")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerRoadInfo  '" +
        this.nowDate +
        "','" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    //各班组昨日考勤打卡正点次数百分比
    async initWorkOnStandard_TEN() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkOnStandard_TEN"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightAllInfo  '" +
        this.nowDate +
        "','" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    //各班组昨日考勤打卡正点人数百分比
    async initWorkOnStandard_TOURTEEN() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_TOURTEEN")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe2());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightInfo  '" +
        this.nowDate +
        "','" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    
    // 昨日泔水废油脂进厂量占比及数量
    async initWorkOnStandard_SIX() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkOnStandard_SIX"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      // var url = "http://111.160.78.62:9935/api/EChartsYX/GetWorkOnStandard?sqlName=" + this.form.userName + "&url=exec T_GetVehicleRoadStandardInfo '" + this.form.date + "','" + this.form.clientNo + "',机扫";
      var url =
        "http://111.160.78.62:5565/CompanyapiDFLSapi/DFBigScreen/GetTypeWeightInfo?CLIENT_NO=" +
        this.ClientNo;
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        series: [
          {
            data: data.series,
          },
        ],
      });
    },
    
    // 考勤打卡全日正点人数情况统计
    async initWorkOnStandard_THIRTEEN() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(
        document.getElementById("WorkOnStandard_THIRTEEN")
      );
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(collectionRate());
      // var url =
      //   "http://111.160.78.62:9935/api/EChartsYX/GetPieMultipurposeN?sqlName=dlhw&url=exec T_GetWorkerAttendenceRightInfo  '" +
      //   this.nowDate +
      //   "','" +
      //   this.ClientNo +
      //   "'";
      //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      myChart.setOption({
        series: [
          {
            data: [{"value":33.1,"name":"正点人数：130人"},{"value":66.9,"name":"不正点人数：261人"}],
          },
        ],
      });
    },
    // 各班组人员人均报警统计情况
    async initWorkOnStandard_SS() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkOnStandard_SS"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbeH2());
      // var url =
      //   "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerAlarmInfo  '" +
      //   this.nowDate +
      //   "','" +
      //   this.ClientNo +
      //   "'";
      // //  +localStorage.getItem("CLIENT_NO");
      // const { data } = await this.$Http.get(url);
      
      myChart.setOption({
        yAxis: {
          data: ["卫国道班组","李明庄班组","百合春天班组","秋丽家园班组","成林道班组","张贵庄班组","津汉公路班组","天山南路班组","万新南片班组","东城家园班组","好新家园班组","昆仑路班组","津滨大道班组","华明园内二班组","橡树湾班组","高新区班组","开发区北班组","华明园内一班组","华明园内三班组","登州路班组"]
        },
        series: [{
          data: ["5.14","2.67","2.2","2.12","1.56","1.45","1","0.95","0.52","0.48","0.33","0.32","0.31","0.19","0.19","0.17","0.16","0.15","0.13","0.07"]
        }]
      });
    },
    // 人员作业趟次
    async initWorkOnStandard_CX() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkOnStandard_CX"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerRoadCountInfoDetail  '" +
        this.nowDate +
        "','" +
        this.form.clientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          { 
            name:'趟次',
            data: ["3","3","3","3","3","3","3","3","2","2","2","2","1","1","1","1","1","1","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0","0"],
          },
        ],
      });
    },
    //各班组长巡逻村情况百分比
    async initWorkOnStandard_XS() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkOnStandard_XS"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT1BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerCheckInfo  '" +
        this.nowDate +
        "','" +
        this.ClientNo +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    // 人员作业统计
    async initWorkOnStandard_JS() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("WorkOnStandard_JS"));
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(spotsNumbe());
      var url =
        "http://111.160.78.62:9935/api/EChartsYX/GetT0BarMultipurpose?sqlName=dlhw&url=exec T_GetWorkerRoadInfoDetail  '" +
        this.nowDate +
        "','" +
        this.form.clientNo2 +
        "'";
      //  +localStorage.getItem("CLIENT_NO");
      const { data } = await this.$Http.get(url);
      myChart.setOption({
        xAxis: {
          data: data.categories,
        },
        series: [
          {
            data: data.data,
          },
        ],
      });
    },
    changeOperationSummaryValue(index) {
      switch (index) {
        case 0:
          {
            this.changeOperationValue = "WorkOnStandard_FOUR";
          }
          break;
        case 1:
          {
            this.changeOperationValue = "WorkOnStandard_EIGHT";
          }
          break;
        case 2:
          {
            this.changeOperationValue = "WorkOnStandard_TEN";
          }
          break;
        case 3:
          {
            this.changeOperationValue = "WorkOnStandard_TOURTEEN";
          }
          break;
      }
      setTimeout(() => {
        this.changeOperationSummary(index);
      }, 50);
    },
    changeOperationSummary(index) {
      switch (index) {
        case 0:
          {
            this.initWorkOnStandard_FOUR();
            this.changeOperationName = "各班组人员实时在线统计情况百分比";
          }
          break;
        case 1:
          {
            this.initWorkOnStandard_EIGHT();
            this.changeOperationName = "各班组昨日道路作业完成百分比";
          }
          break;
        case 2:
          {
            this.initWorkOnStandard_TEN();
            this.changeOperationName = "各班组昨日考勤打卡正点次数百分比";
          }
          break;
        case 3:
          {
            this.initWorkOnStandard_TOURTEEN();
            this.changeOperationName = "各班组昨日考勤打卡正点人数百分比";
          }
          break;
      }
    },
    timeFn() {
      this.timing = setInterval(() => {
        this.dateDay = formatTime(new Date(), "HH: mm: ss");
        this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000);
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
        this.initC();
      }, 2000);
    },
  },
};
</script>

<style lang="scss">
@import "../assets/scss/index.scss";
//下方区域的布局
.content-box3 {
  grid-auto-flow: row dense;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  grid-template-rows: repeat(4, 24%);
  grid-template-areas:
    "one four four  six"
    "nine four four  seven"
    // 'two six six seven seven seven'
    "five twelve twelve seven"
    "thirteen twelve twelve  seven";
}
.one {
  margin: 5px;
  grid-area: one;
  background: rgba(8,48,74,0.5);
}

// .two {
//   margin: 5px;
//   grid-area: two;
//   background: rgba(8,48,74,0.5);
//   // grid-row-start: span 2;
// }
.three {
  margin: 5px;
  grid-area: three;
  background: rgba(8,48,74,0.5);
}
.four {
  margin: 5px;
  grid-area: four;
  background: rgba(8,48,74,0.5);
}
.five {
  margin: 5px;
  grid-area: five;
  background: rgba(8,48,74,0.5);
}
.six {
  margin: 5px;
  grid-area: six;
  background: rgba(8,48,74,0.5);
}
.seven {
  margin: 5px;
  grid-area: seven;
  background: rgba(8,48,74,0.5);
}
.eight {
  margin: 5px;
  grid-area: eight;
  background: rgba(8,48,74,0.5);
}
.nine {
  margin: 5px;
  grid-area: nine;
  background: rgba(8,48,74,0.5);
}
.ten {
  margin: 5px;
  grid-area: ten;
  background: rgba(8,48,74,0.5);
}
.eleven {
  margin: 5px;
  grid-area: eleven;
  background: rgba(8,48,74,0.5);
}
.twelve {
  margin: 5px;
  grid-area: twelve;
  background: rgba(8,48,74,0.5);
}
.thirteen {
  margin: 5px;
  grid-area: thirteen;
  background: rgba(8,48,74,0.5);
}
.fourteen {
  margin: 5px;
  grid-area: fourteen;
  background: rgba(8,48,74,0.5);
}
// 底部数据
.bototm-box {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 50%);
}
.title {
  padding-top: 10px;
  padding-left: 20px;
  .text {
    font-size: 15px;
    color: #fff;
  }
}
.title-text {
  font-family: "SimHei";
  font-weight: bold;
}
.list {
  position: absolute;
  right: -51%;
  // top: 25px;
}
</style>
